<template>
    <div class="content-container" 
        @touchstart="onTouchStart" 
        @touchmove="onTouchMove" 
        @touchend="onTouchEnd" 
    >
        <!-- 下拉刷新时的提示球 -->
        <div class="refresh-tip" :style="refreshTipStyle">BP</div>

        <!-- 每一个作品显示 -->
        <div class="work-shower" v-for="(w, index) in worksData" :key="index"
            :class="{'work-shower-light': !$store.state.isDarkMode, 'work-shower-dark': $store.state.isDarkMode}"
            @click="toWorkPage(w.id)"
        >
            <!-- 作品封面 -->
            <div class="work-cover">
                <img :src="w.coverUrl" :alt="w.id">
            </div>
            <!-- 作品信息 -->
            <div class="work-info">
                <!-- 热度显示 -->
                <div class="work-heat">
                    &#xe6ac; {{showHeat(w.heat)}}
                </div>
                <div class="work-title">{{w.title}}</div>
                <div class="work-author">{{w.author}}</div>
            </div>       
        </div>
        <!-- 用于补足空间防止下面的内容被底部导航栏遮挡而显示不全 -->
        <div class="fixSpace"></div>
    </div>
</template>

<script>
/* 数据引入 */
/* import Works from '../data/Works.json' */
import router from '@/router'

export default {
    name: "HomeContent",
    data(){
        return{
            isRefresh: false,
            touchMoveDis: 0,
            touchStartY: 0,
            maxTouchDis: 100,
        }
    },
    computed:{
        worksData(){
            return this.$store.state.showingWorks
        },
        refreshTipStyle(){
            return{
                top: `${90 + this.touchMoveDis}px`,
                /* transform: `translate(0, ${this.touchMoveDis}px)`, */
                opacity: this.touchMoveDis > 0 ? 1 : 0  
            }
        },
    },
    methods:{
        /* #region以下方法用于实现下拉刷新start */
        /* 手指开始触碰 */
        onTouchStart(e){
            this.touchMoveDis = 0   //重置手指向下拉动距离
            this.touchStartY = e.targetTouches[0].clientY   //记录开始位置
        },
        /* 手指滑动 */
        onTouchMove(e){
            if(document.querySelector(".content-container").scrollTop==0){ //判断滚动条处于顶部位置
                if(this.touchMoveDis < this.maxTouchDis)
                    this.touchMoveDis = Math.pow(e.targetTouches[0].clientY - this.touchStartY, 0.8)    //手指向下移动距离计算
            }else{  //中途滚动条不处于顶部则重置下拉距离，从而无法触发刷新
                this.touchMoveDis = 0
            }
        },
        /* 手指触碰结束 */
        onTouchEnd(){
            /* console.log(this.touchMoveDis); */
            if(this.touchMoveDis >= this.maxTouchDis*0.8)    //当下拉距离超过最大距离的0.8触发刷新
                this.onRefresh()
            
            this.touchMoveDis = 0   //重置手指向下拉动距离
        },
        /* #endregion以下方法用于实现下拉刷新end */

        /* 刷新 */
        onRefresh(){
            console.log("刷新");
            this.$store.dispatch('refresh')
        },

        /* 显示的热度值 超过一万的单位改为万 */
        showHeat(value){
            if(value < 10000)
                return value
            else
                return `${(value/10000).toFixed(1)}万`
        },

        /* 切换至作品详情界面 */
        toWorkPage(workId){
            router.push({
                path:"/workPage",
                query: {
                    id: workId
                }
            })
        }

    },
    mounted(){
        /* 刚挂载组件时 刷新 */
        this.onRefresh()
    },

}
</script>

<style scoped lang="less">
.content-container {
    margin-top: 100px;
    width: 100%;
    height: 100vh;
    font-size: 20px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;
}
.refresh-tip {
    position: fixed;
    height: 40px;
    width: 40px;
    background-color: rgb(255, 255, 255);
    border-radius: 50px;
    left: 0;
    right: 0;
    top: 90px;
    margin: auto;
    opacity: 0;
    transition: .2s all;
    color: rgb(255, 11, 145);
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    font-weight: bolder;
    animation: refreshTip 1s infinite;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    z-index: 99;
}

.work-shower {
    height: 54vw;
    width: 48vw;
    /* background-color: rgb(44, 44, 44); */
    border-radius: 6px;
    overflow: hidden;
    margin: 1vw 0;
}
.work-cover {
    height: 65%;
    width: 100%;
    background-color: rgb(108, 153, 138);
    overflow: hidden;
}
.work-cover img {
    height: 100%;
    width: 100%;
}
.work-info {
    height: 35%;
    padding: 6px;
    font-size: 15px;
    position: relative;

    .work-heat {
        position: absolute;
        background-image: linear-gradient(rgba(0,0,0,0), rgba(29, 29, 29, 0.55));
        height: 8vw;
        width: 100%;
        left: 0;
        top: -8vw;
        line-height: 10vw;
        text-indent: 0.5em;
        font-size: 12px;
        color: rgb(233, 233, 233);
        text-shadow: 1px 1px 2px rgb(82, 81, 81);
    }
    .work-heat::first-letter {
        font-family: 'icon-heat';
        font-size: 16px;
    }
    
    .work-title {
        height: 55%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .work-author {
        line-height: 2em;
        font-size: 14px;
        color: rgb(150, 150, 150);
    }
    .work-author::before {
        content: "UP";
        font-size: 12px;
        line-height: 1em;
        color: rgb(150, 150, 150);
        padding: .5px 2px;
        margin-right: 2px;
        border-radius: 5px;
        border: 1px solid rgb(150, 150, 150);
        transform: scale(.5, .5);
    }
}

.fixSpace {
    width: 100%;
    height: 165px;
}


@keyframes refreshTip {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>